<template>
  <div>
    <!-- 页头 -->
    <div class="top" :style="`background:rgba(255, 255, 255, ${opacity}`">
      <span class="back">
        <!-- 点击返回首页 -->
        <router-link to="/">
          <img src="../assets/back.png" alt="" />
        </router-link>
      </span>
      <!-- 分享按钮 -->
      <my-share></my-share>
    </div>
    <!-- 菜谱详情 -->
    <div class="container">
      <!-- 用户头像 -->
      <div class="menup">
        <img :src="`${mpic}`" alt="" />
      </div>
      <!-- 菜谱标题 -->
      <div class="menut">
        <h1>{{ mtitle }}</h1>
        <p>
          <span>8.5</span>综合评分&nbsp;&nbsp;·&nbsp;&nbsp;
          <span>236</span>人做过&nbsp;&nbsp;·&nbsp;&nbsp;
          <span>250</span>
          人收藏
        </p>
      </div>
      <!-- 用户信息 -->

      <div class="user">
        <router-link to="/">
          <div>
            <img :src="`${headimg}`" alt="" />
          </div>
          <ul>
            <li>{{ uname }}</li>
            <li>{{ moment(optime).format("YYYY-MM-DD") }}</li>
          </ul>
        </router-link>
        <button>关注</button>
      </div>

      <!-- 分享心得 -->
      <div class="remark">
        {{ remark }}
      </div>
      <!-- 制作方法 -->
      <div class="make">
        <!-- 用料 -->
        <p>
          用料
          <img src="../assets/cheng.png" alt="" />
        </p>

        <div class="materials" v-for="(item, i) in materials" :key="i">
          <ul>
            <li>
              <div>{{ item.food }}</div>
              <div>{{ item.count }}</div>
            </li>
          </ul>
        </div>
        <!-- 步骤 -->
        <div class="steps" v-for="(item, i) in steps" :key="i.value">
          <p>
            步骤
            <span>{{ item.sorder }}</span>
          </p>
          <div class="stepsp">
            <img :src="`${item.spic}`" alt="" />
          </div>
          <div class="explain">
            {{ item.stexp }}
          </div>
        </div>
        <div class="optime">
          菜谱更新与<span>{{ moment(optime).format("YYYY-MM-DD") }}</span
          >,游览<span>123</span>次
        </div>
      </div>
      <!-- 评论 -->
      <div class="comment">
        <p>这道菜的评论</p>
        <div class="user">
          <div class="userp">
            <img src="../assets/1.jpg" alt="" />
          </div>
          <ul>
            <li>家有煮父</li>
            <li>可以的</li>
          </ul>
        </div>
        <div class="user">
          <div class="userp">
            <img src="../assets/1.jpg" alt="" />
          </div>
          <ul>
            <li>家有煮父</li>
            <li>牛啊</li>
          </ul>
        </div>
        <div class="user">
          <div class="userp">
            <img src="../assets/1.jpg" alt="" />
          </div>
          <ul>
            <li>家有煮父</li>
            <li>666</li>
          </ul>
        </div>
        <p style="color: red">查看全部(50)</p>
        <div class="user">
          <div class="userp">
            <img :src="`${headimg}`" alt="" />
          </div>
          <input type="text" placeholder="喜欢评论的人,做饭一定超好吃~" />
        </div>
      </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
      <p>
        <img src="../assets/Collection.png" alt="" />
        <span>收藏</span>
      </p>
      <p>
        <img src="../assets/upload2.png" alt="" />
        <span>传作品</span>
      </p>
      <p>
        <img src="../assets/news2.png" alt="" />
        <span>6</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      mtitle: "", //菜谱名
      mpic: "", //菜谱封面图
      uname: "", //用户名
      headimg: "", //用户头像
      remark: "", //分享心得
      tips: "", //小贴士
      optime: "", //上传时间
      materials: [], //保存菜谱用料
      steps: [], //保存菜谱步骤
      opacity: 0,
      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
      showShare: false,
    };
  },
  methods: {
    /** 发送http请求，加载菜谱详情到界面 */
    loadDetails() {
      // 发送http请求，获取菜谱详情表
      this.axios.get("/search/details?menu_id=1").then((result) => {
        let details = result.data.result[0];
        // 存入data
        this.mtitle = details.mtitle;
        this.mpic = details.mpic;
        this.remark = details.remark;
        this.tips = details.tips;
        this.optime = details.optime;
        this.uname = details.uname;
        this.headimg = details.headimg;
      });
    },
    /** 发送http请求，加载菜谱用料表到界面 */
    loadMaterials() {
      // 发送http请求，获取菜谱用料表
      this.axios.get("/search/materials?menu_id=1").then((result) => {
        let materials = result.data.result;
        this.materials = materials;
      });
    },
    /** 发送http请求，加载菜谱用料表到界面 */
    loadSteps() {
      // 发送http请求，获取菜谱用料表
      this.axios.get("/search/steps?menu_id=1").then((result) => {
        let steps = result.data.result;
        this.steps = steps;
      });
    },
    /** 页面滚动到指定高度 改变页头背景颜色透明度 **/
    changetop() {
      let top =
        document.documentElement.scrollTop ||
        document.body.scrollTop ||
        window.pageYOffset;
      if (top > 0 && top <= 200) {
        let op = top / 200;
        this.opacity = op;
      }
    },
  },

  mounted() {
    this.loadDetails();
    this.loadMaterials();
    this.loadSteps();
    window.addEventListener("scroll", this.changetop);
  },
};
</script>
<style lang="scss" scoped>
// 页头
.top {
  position: fixed;
  display: flex;
  width: 100%;
  height: 60px;
  align-items: center;
  .back {
    margin-right: 18rem;
  }
  span {
    margin-left: 1rem;
  }
}
// 菜谱详情
.container {
  letter-spacing: 1px;
  word-break: break-all;
  margin-bottom: 55px;
  // 菜谱的封面
  .menup {
    img {
      width: 100%;
      height: 100%;
    }
  }
  // 菜谱名
  .menut {
    width: 90%;
    margin-top: 60px;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
    border-bottom: 1px solid #ededed;
    margin: 20px auto;
    text-align: center;
    h1 {
      font-size: 22px;
      font-weight: 900;
      margin-bottom: 15px;
    }
    p {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 15px;
    }
  }
  // 用户信息
  .user {
    display: flex;
    align-items: center;
    div {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 15px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    ul {
      margin: 0 10px;
      li {
        line-height: 35px;
        height: 22px;
        color: #000;
      }
      li:nth-child(2) {
        font-size: 10px;
        color: #adadad;
      }
    }
  }
  // 关注按钮
  button {
    position: absolute;
    background: #ee6a50;
    border: none;
    border-radius: 5px;
    color: #fff;
    height: 30px;
    font-size: 12px;
    padding: 0 15px;
    letter-spacing: 1px;
    right: 20px;
    z-index: -1;
  }
  // 分享
  .remark {
    margin: 15px 16px;
    line-height: 25px;
  }
  //制作
  .make {
    width: 90%;
    margin: auto;
    // 用料表
    p {
      font-family: 黑体;
      font-weight: bold;
      line-height: 16px;
      img {
        margin-bottom: 3px;
      }
    }
    .materials {
      margin-bottom: 20px;
      ul {
        li {
          height: 30px;
          margin: 20px 0;
          border-bottom: 2px dotted #b0b0b9;
          div {
            display: inline-block;
            width: 50%;
          }
        }
      }
    }
  }
  // 步骤
  .steps {
    border-bottom: 1px solid #ededed;
    margin: 20px auto;
    p {
      font-family: 黑体;
      font-weight: bold;
      line-height: 16px;
    }
    // 步骤图
    .stepsp {
      margin: 15px auto;
      height: 30vh;
      border-radius: 10px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    // 说明
    .explain {
      line-height: 25px;
      margin-bottom: 15px;
    }
  }
  // 制作时间
  .optime {
    position: relative;
    font-size: 10px;
    color: #adadad;
    top: -16px;
    margin-bottom: 20px;
  }
}
// 评论
.comment {
  p {
    text-indent: 1em;
    font-weight: 900;
    margin-bottom: 15px;
  }
  .user {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .userp {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 15px;
      img {
        height: 100%;
        width: 100%;
      }
    }
    ul {
      margin: 0 10px;
      li {
        line-height: 35px;
        height: 22px;
        color: #adadad;
      }
      li:nth-child(2) {
        font-size: 15px;
        color: #000;
      }
    }
    input {
      border: none;
      background: #c8c8c875;
      width: 43vh;
      height: 35px;
      border-radius: 20px;
      font-size: 14px;
      text-indent: 1em;
      margin-left: 10px;
    }
  }
}
// 页脚
.footer {
  position: fixed;
  display: flex;
  width: 100%;
  height: 50px;
  bottom: 0;
  background: #fff;
  font-size: 15px;
  border-top: 1px solid #b0b0b9;
  z-index: 0;
  p {
    margin: 0px 10px;
    line-height: 50px;
    span {
      display: inline-block;
      margin-left: 10px;
    }
  }
  p:first-child {
    color: #d81e06;
  }
}
</style>
